<template>
	<view class="container">
		<uni-card title="端阀门管理" :is-shadow="true" margin="20rpx" class="full-height-card">
			<view class="card-content">
				<!-- 搜索栏 -->
				<uni-search-bar v-model="searchText" placeholder="搜索阀门编号/名称" @confirm="search" @input="onSearchInput" />
				
				<!-- 功能按钮 -->
				<view class="action-buttons">
					<button type="primary" size="mini" @click="navigateToAdd">添加阀门</button>
					<button type="default" size="mini" @click="refreshList">刷新列表</button>
				</view>
				
				<!-- 阀门列表 -->
				<view class="valve-list-container">
					<uni-card v-for="valve in filteredValveList" :key="valve.id" 
						:title="'阀门' + valve.id + ' - ' + valve.name" 
						:extra="valve.status" 
						:note="valve.location"
						padding="10px 12px"
						margin="10px 0"
						@click="showValveActions(valve)">
						
						<template #header>
							<view class="card-header">
								<view class="card-icon">
									<uni-icons type="gear-filled" size="26" color="#3A8CFF"></uni-icons>
								</view>
								<text class="card-title">阀门{{ valve.id }} - {{ valve.name }}</text>
								<uni-tag :text="valve.status" :type="getStatusType(valve.status)" size="small" />
							</view>
						</template>
						
						<text class="valve-card-content">
							<text class="label">型号: </text>{{ valve.model }}，
							<text class="label">口径: </text>{{ valve.diameter }}mm，
							<text class="label">驱动: </text>{{ valve.drivingMode }}
						</text>
						
						<view slot="actions" class="card-actions">
							<view class="card-action-item" @click.stop="viewValveDetail(valve)">
								<uni-icons type="eye" size="18" color="#3A8CFF"></uni-icons>
								<text>详情</text>
							</view>
							<view class="card-action-item" @click.stop="editValve(valve)">
								<uni-icons type="compose" size="18" color="#3A8CFF"></uni-icons>
								<text>编辑</text>
							</view>
							<view class="card-action-item" @click.stop="deleteValve(valve)">
								<uni-icons type="trash" size="18" color="#dd524d"></uni-icons>
								<text>删除</text>
							</view>
						</view>
					</uni-card>
					
					<view v-if="filteredValveList.length === 0" class="empty-data">
						<uni-icons type="inbox" size="50" color="#ccc"></uni-icons>
						<text>暂无阀门数据</text>
					</view>
				</view>
			</view>
		</uni-card>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				valveList: [
					{
						id: 'V001',
						name: '进水主阀',
						type: '闸阀',
						status: '正常',
						model: 'Z45X-16Q',
						diameter: 200,
						material: '球墨铸铁',
						pressureLevel: 'PN16',
						drivingMode: '手动',
						area: '水厂一区',
						location: '进水泵房东侧',
						networkLocation: '主管网节点A12',
						installDate: '2022-05-15',
						manufacturer: '上海XX阀门制造有限公司',
						supplier: '北京XX设备有限公司',
						contact: '张工',
						contactPhone: '13812345678'
					},
					{
						id: 'V002',
						name: '出水控制阀',
						type: '蝶阀',
						status: '维护中',
						model: 'D343H-16C',
						diameter: 150,
						material: '不锈钢',
						pressureLevel: 'PN10',
						drivingMode: '电动',
						area: '水厂二区',
						location: '出水泵房西侧',
						networkLocation: '配水管网节点B08',
						installDate: '2022-06-20',
						manufacturer: '北京XX阀门制造有限公司',
						supplier: '北京XX设备有限公司',
						contact: '李工',
						contactPhone: '13987654321'
					},
					{
						id: 'V003',
						name: '旁通控制阀',
						type: '球阀',
						status: '故障',
						model: 'Q41F-16P',
						diameter: 100,
						material: '不锈钢',
						pressureLevel: 'PN16',
						drivingMode: '气动',
						area: '水厂三区',
						location: '配水间南侧',
						networkLocation: '支管网节点C05',
						installDate: '2022-07-10',
						manufacturer: '天津XX阀门制造有限公司',
						supplier: '天津XX设备有限公司',
						contact: '王工',
						contactPhone: '13756781234'
					}
				],
				searchText: ''
			}
		},
		computed: {
			filteredValveList() {
				if (!this.searchText) {
					return this.valveList;
				}
				
				const searchLower = this.searchText.toLowerCase();
				return this.valveList.filter(valve => {
					return valve.id.toLowerCase().includes(searchLower) || 
						valve.name.toLowerCase().includes(searchLower);
				});
			}
		},
		methods: {
			search() {
				console.log('搜索:', this.searchText);
			},
			onSearchInput() {
				// 当输入内容时，会通过计算属性filteredValveList自动过滤
			},
			refreshList() {
				uni.showLoading({
					title: '刷新中...'
				});
				
				// 模拟请求延迟
				setTimeout(() => {
					// 在实际应用中，这里应该调用API重新获取数据
					uni.hideLoading();
					uni.showToast({
						title: '刷新成功',
						icon: 'success'
					});
				}, 1000);
			},
			navigateToAdd() {
				uni.navigateTo({
					url: '/pages/valve-management/valve-form?mode=add'
				});
			},
			showValveActions(valve) {
				// 可以在这里添加更多操作，例如触发一个全屏操作面板
				console.log('显示阀门操作', valve.id);
			},
			viewValveDetail(valve) {
				uni.navigateTo({
					url: `/pages/valve-management/valve-detail?id=${valve.id}`
				});
			},
			editValve(valve) {
				uni.navigateTo({
					url: `/pages/valve-management/valve-form?mode=edit&id=${valve.id}`
				});
			},
			deleteValve(valve) {
				// 确认删除
				uni.showModal({
					title: '确认删除',
					content: `确定要删除阀门${valve.id}吗？`,
					confirmColor: '#dd524d',
					success: (res) => {
						if (res.confirm) {
							// 执行删除操作
							const index = this.valveList.findIndex(v => v.id === valve.id);
							if (index !== -1) {
								this.valveList.splice(index, 1);
								uni.showToast({
									title: '删除成功',
									icon: 'success'
								});
							}
						}
					}
				});
			},
			getStatusType(status) {
				switch(status) {
					case '正常':
						return 'success';
					case '维护中':
						return 'warning';
					case '故障':
						return 'error';
					default:
						return 'default';
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
		height: 100%;
	}
	
	.container {
		padding-bottom: 0;
		min-height: 100vh;
	}
	
	.full-height-card {
		min-height: calc(100vh - 140rpx);
		margin-bottom: 0 !important;
		box-shadow: none !important;
		
		:deep(.uni-card__content) {
			padding-bottom: 50rpx;
		}
	}
	
	.card-content {
		padding: 10rpx 0;
	}
	
	.action-buttons {
		display: flex;
		justify-content: space-between;
		padding: 20rpx;
		
		.button {
			margin: 0 10rpx;
		}
	}
	
	.valve-list-container {
		margin-top: 20rpx;
		height: calc(100vh - 350rpx);
		overflow-y: auto;
	}
	
	.empty-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #999;
		
		text {
			margin-top: 20rpx;
			font-size: 28rpx;
		}
	}
	
	.valve-card-content {
		font-size: 26rpx;
		color: #666;
		
		.label {
			color: #999;
		}
	}
	
	.card-header {
		display: flex;
		align-items: center;
		padding: 10rpx 0;
	}
	
	.card-icon {
		margin-right: 15rpx;
	}
	
	.card-title {
		flex: 1;
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
	}
	
	.card-actions {
		display: flex;
		justify-content: flex-end;
		margin-top: 20rpx;
	}
	
	.card-action-item {
		display: flex;
		align-items: center;
		margin-left: 30rpx;
		
		text {
			font-size: 24rpx;
			margin-left: 4rpx;
		}
	}
</style> 